<template>
    <!-- 搜索 -->
    <div class="search">
            <form action="/">
            <van-search
            v-model="value"
            placeholder="请输入搜索关键词"
            show-action
            shape="round"
            @search="onSearch"
           
          >
            <div slot="action" @click="onSearch">搜索</div>
          </van-search>
            </form>
        <!-- <form action="/">
            <van-search
              v-model="value"
              placeholder="请输入搜索关键词"
              show-action
              @search="onSearch"
              @cancel="onCancel"
            />
        </form> -->
    </div>
</template>

<script>
export default {
  data() {
    return {
        value: ''
    }
  },
  methods: {
    //   onCancel() { //取消时触发
    //     alert('点击按钮搜索')
    //   },
      onSearch() { //回车和点击按钮触发
        alert('回车/按钮搜索')
      }
  }
}
</script>

<style lang="css" scoped>
.search {
    display: inline-block;
    margin-left: 3%;
}
.van-search--show-action {
    width: 100%;
}
</style>